<template>
	
	<view style="background: #f6f6f6;height: 100vh;display: inline-block;width: 750rpx;">
		<view class="" style="border-radius: 20rpx; padding: 30rpx; margin:40rpx auto;width: 700rpx;margin:40rpx auto;background: #fff;">
			<view class=" u-font-weight u-margin-bottom-20">积分充值</view>
			<view class="u-flex u-row-between u-flex-wrap ">
				<view class="list" v-for="(item,index) in list" :key="index" :class="current==index?'change':''"
					@click="select(index)">
					<view class="">
						{{item.money}}元
					</view>
					<view class="">
						购买：{{item.integral}}积分
					</view>
				</view>
			</view>
			
		</view>
		
		<view style="margin: auto;width: 700rpx;" >
			<u-button @click="ok" type="primary" :custom-style="{background:'#379BFC'}">充值</u-button>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import wxpay from '@/common/wxpay.js';
	export default{
		data(){
			return{
				list:[],
				current: 0,
				
				
			}
		},
		onLoad() {
			this.recharge()
		},
		methods: {
			select(index) {
				this.current = index
			},
			recharge() {
				return new Promise((resolve, reject) => {
					this.$u.post('/index/recharge', {
					}).then(res => {
						this.list = res;
						resolve(res)
					}).catch(err => {
			
					})
				})
			},
			ok(){
				this.$u.post('/indent/recharge', {
					recharge_id:this.list[this.current].id
					}).then(res => {
					
					const wx=new wxpay(res);
												wx.pay().then(res=>{
													  this.$refs.uToast.show({
													  	title: '充值成功',
													  	type: 'success',
													  	back :true
													  })
												}).catch(err=>{
													
												})
					}).catch(err => {
							
					})
				
			}
			
			
		},
	}
</script>

<style>
	
	.list {
		width: 309rpx;
		height: 143rpx;
		text-align: center;
		background: #F6F6F6;
		border-radius: 10rpx;
		color: #B2B2B2;
		line-height: 70rpx;
		margin-bottom: 20rpx;
	}
	
	.change {
		background: #379BFC;
		color: #FFFFFF;
	}
</style>
